<template>
	<view class="page">
		<nav-bar>E云教学课程中心</nav-bar>
		<view class="grid-card">
			<view class="grid-content">
				<view class="card-title">
					<view class="title-sidebar"></view>
					<view class="title-text">
						学习中心
					</view>
				</view>
				<u-grid :col="2" class="grid">
					<u-grid-item v-for="(item,id) in tab_list" @click="navgateTo(item.detail,id)">
						<u-badge :count="item.count" :offset="[20, 20]"></u-badge>
						<u-image width="125rpx" height="125rpx" :src="item.image_src"></u-image>
						<view class="grid-text">
							{{item.content}}
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_list: [{
					content: '公开课',
					image_src: "../../static/icon/openCourse.png",
					detail: 'pages/course/openCourse/openCourse',
					count: 0
				}, {
					content: '我的课程',
					image_src: "../../static/icon/myCourse.png",
					detail: 'pages/course/myCourse/myCourse',
					count: 0
				}, {
					content: '我的问答',
					image_src: "../../static/icon/myQandA.png",
					detail: 'pages/course/myQandA/myQandA',
					count: 0
				}, {
					content: '我的笔记',
					image_src: "../../static/icon/myNote.png",
					detail: 'pages/course/myNote/myNote',
					count: 0
				}],
				tabid: 0,
				course_list: [],
				QAdata: []
			}
		},
		methods: {
			navgateTo(url, id, course_list) {
				console.log(url, id);
				if (id === 0 || id === 1) {
					this.$u.route(url, {
						info: '课程'
					});
				} else if (id === 2) {
					this.$u.route(url, {
						info: '问答展示'
					});
				} else if (id === 3) {
					this.$u.route(url, {
						info: '笔记展示'
					});
				} else {
					console.log('error');
				}

			}
		},
		onLoad: function() {
			this.$api.getOpenCourseParams(this.$store.state.access_token, '')
				.then(res => {
					return this.$api.getOpenCourseList(this.$store.state.access_token)
				}).then(res => {
					this.tab_list[0].count = res.values.records.length
					return this.$api.getMyCourseList(this.$store.state.access_token)
				}).then(res => {
					this.tab_list[1].count = res.values.records.length
				})
		},
		mounted() {
			var that = this
			console.log(this.$store.state.hasLogin);
			if (!this.$store.state.hasLogin) {
				that.$refs.uToast.show({
					title: '请在登录后查看！',
					url: '/pages/login/login',
					params: {
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $uni-bg-color;
	}

	.page {

		.grid-card {
			box-sizing: border-box;
			padding: 25rpx;

			.grid-content {
				background-color: #FFFFFF;
				box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.2);

				.card-title {
					display: flex;
					align-items: center;
					height: 90rpx;
					box-sizing: border-box;

					.title-sidebar {
						box-sizing: border-box;
						margin-left: 25rpx;
						background-color: $theme-color;
						width: 10rpx;
						height: 34rpx;
						border-radius: 10rpx;
					}

					.title-text {
						margin-left: 15rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.grid-text {
					font-weight: bold;
				}
			}

		}
	}
</style>
